<style scoped lang="scss">
  .erpDividerCard.container{
    padding: 8px;
  }
</style>
<template>
  <section ref="erpDividerCard"
           :class="`erpDividerCard  ${$data.show?'show':''}`"
           style="margin-bottom: 10px;border-left: 1px solid #ddd;border-radius: 3px;border-right: 1px solid #ddd;">
    <div class="boxTitle" @click="triggerContainer"
    :style="`display: flex;position: relative;padding-left: 22px;${$props.props_title_style}`">
      <!--是否可以折叠-->
      <template v-if="$props.isCanFolding">
        <svg-icon :icon-class="`${$data.show?'down':'right'}`"
                  style="font-size: 12px;margin-right: 5px;cursor: pointer;position: absolute;top: 50%;margin-top: -6px;left:5px;"></svg-icon>
      </template>

      <template v-if="$scopedSlots.title">
        <slot name="title"></slot>
      </template>
      <template v-else>
         <span style="cursor: pointer;font-size: 14px;color: #606266;" v-if="$props.title">
        {{$props.title}}
        </span>
      </template>
    </div>

    <section class="erpDividerCard container" style="">
      <slot />
    </section>

  </section>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
      },
      firstHidden: {
        type: Boolean,
        default: true,
      },
      //折叠
      isCanFolding: {
        type: Boolean,
        default(){
          return true
        },
      },
      props_title_style:{
        type: String,
      }

    },
    data() {
      return {
        show: !this.$props.firstHidden,
      };
    },
      watch: {
          "$props.firstHidden"(value) {
              setTimeout(() => {
                  if (value) {
                      $($(this.$refs['erpDividerCard']).find('.container')).hide();
                      this.$data.show = false;
                  } else {
                      $($(this.$refs['erpDividerCard']).find('.container')).show();
                      this.$data.show = true;
                  }
              }, 100);
          }
      },
    mounted() {
      setTimeout(() => {
        if (this.$props.firstHidden) {
          $($(this.$refs['erpDividerCard']).find('.container')).hide();
          this.$data.show = false;
        } else {
          $($(this.$refs['erpDividerCard']).find('.container')).show();
          this.$data.show = true;
        }
      }, 100);
    },
    methods: {
      triggerShow(istrue) {
         if(istrue){
          this.showContainer()
         }else{
          this.closeContainer()
         }
      },
      triggerContainer() {
        if(this.$props.isCanFolding){
          $($(this.$refs['erpDividerCard']).find('.container')).slideToggle('fast');
          this.$data.show = !this.$data.show;
        }

       setTimeout(()=>{
           this.$emit("triggerContainer",{
               show:this.$data.show
           })
       },100)
      },
      showContainer() {
        $($(this.$refs['erpDividerCard']).find('.container')).slideDown('fast');
        this.$data.show = true;
      },
      closeContainer() {
        $($(this.$refs['erpDividerCard']).find('.container')).slideUp('fast');
        this.$data.show = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .boxTitle {
    background-color: #fafafa;
    border-bottom: 1px solid #dbdbdb;
    border-top: 1px solid #dbdbdb;
    padding: 8px 16px;
    margin: 0;
    border-radius: 4px 4px 0 0;
  }

  .erpDividerCard {
    border-bottom: none;
  }

  .erpDividerCard.show {
    border-bottom: 1px solid #ddd;


  }
</style>
